<template>
  <div>
    <div class="search-bar">
      <van-row>
        <van-col span="3">
          <img :src="positionIcon" class="position" />
        </van-col>
        <van-col span="16">
          <input type="text" placeholder="查找" class="search-input">
        </van-col>
        <van-col span="5" class="search-btn">
          <van-button size="mini">查找</van-button>
        </van-col>
      </van-row>
    </div>
    <div class="swipe-area">
      <van-swipe :autoplay="2000">
        <van-swipe-item v-for="(banner,index) in bannerPicArr" :key="index">
          <img v-lazy="banner.image" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="type-bar">
      <div v-for="(cate,index) in category" :key="index">
        <img v-lazy="cate.image" width="90%" />
        <span>{{cate.mallCategoryName}}</span>
      </div>
    </div>

    <!-- AD banner area -->
    <div class="ad-banner">
      <img v-lazy='adBanner.PICTURE_ADDRESS' width="100%">
    </div>
    <!-- Recommend goods area -->
    <div class="recommend-area">
      <div class="recommend-title">
        商品推荐
      </div>
      <div class="recommend-body">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item,index) in recommendGoods" :key="index">
            <div class="recommend-item">
              <img :src="item.image" width="80%" />
              <div>{{item.goodsName}}</div>
              <div>￥{{item.price | moneyFilter}}</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- 休闲食品 -->
    <floor-component :floorData="floor1" :floorTitle="floorTitle.floor1" :flag="flag[0]"></floor-component>
    <floor-component :floorData="floor2" :floorTitle="floorTitle.floor2" :flag="flag[1]"></floor-component>
    <floor-component :floorData="floor3" :floorTitle="floorTitle.floor3" :flag="flag[2]"></floor-component>

    <!-- 热卖商品 -->
    <div class="hot-area">
      <div class="hot-title">热卖商品</div>
      <div class="hot-goods">
          <!-- 热卖商品 -->
          <van-list>
            <van-row>
              <van-col span="12" v-for="(item,index) in hotGoods" :key="index">
                <goods-info :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price"></goods-info>
              </van-col>
            </van-row>
          </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import floorComponent from '../component/floorComponent'
import {toMoney} from "@/filter/moneyFilter.js"
import goodsInfo from "../component/goodsInfoComponent"
import url from "@/serviceAPI.config.js"
export default {
  name: 'ShoppingMall',
  data() {
    return {
      category: null,
      positionIcon: require("../../assets/position.png"),
      bannerPicArr: [],
      adBanner: '',
      recommendGoods: [],
      swiperOption: {
        slidesPerView: 3,
        loop: true
      },
      floor1: [],
      floor2: [],
      floor3: [],
      floorTitle:'',
      flag:[1,2,3],
      hotGoods:[]
    }
  },
  filters:{
    moneyFilter(money){
      return toMoney(money);
    }
  },
  created() {
    axios({
      url: url.getShoppingMallInfo,
      method: "get"
    }).then(response => {
      console.log(response);
      if (response.status == 200) {
        this.category = response.data.data.category;
        this.adBanner = response.data.data.advertesPicture;
        this.bannerPicArr = response.data.data.slides;
        this.recommendGoods = response.data.data.recommend;
        this.floor1 = response.data.data.floor1;
        this.floor2 = response.data.data.floor2;
        this.floor3 = response.data.data.floor3;
        this.floorTitle = response.data.data.floorName;
        this.hotGoods = response.data.data.hotGoods;
      }
    }).catch(error => {
      console.log(error);
    })
  },
  components: {
    swiper,
    swiperSlide,
    floorComponent,
    goodsInfo
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search-bar {
  height: 2.2rem;
  background-color: #e5017d;
  line-height: 2.2rem;
  overflow: hidden;
}
.position {
  padding-left: 0.2rem;
  padding-top: 0.3rem;
}
.search-input {
  width: 100%;
  height: 1.3rem;
  border: none;
  border-bottom: 1px solid #fff;
  background-color: #e5017d;
  color: #fff;
}
input::-webkit-input-placeholder {
  color: #eee;
  font-size: 0.8rem;
  text-align: left;
}
.search-btn {
  text-align: center;
}
.swipe-area {
  clear: both;
  max-height: 7.5rem;
  overflow: hidden;
}
.type-bar {
  background-color: #fff;
  margin: 0 0.3rem 0.3rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.type-bar div {
  padding: 0.3rem;
  font-size: 12px;
  text-align: center;
}
.recommend-area {
  background: #fff;
  margin-top: 0.3rem;
}
.recommend-title {
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding: 0.2rem;
  color: #e5017d;
}
.recommend-body {
  border-bottom: 1px solid #eee;
}
.recommend-item {
  border-right: 1px solid #eee;
  font-size: 12px;
  text-align: center;
}
.hot-area{
  text-align: center;
  font-size: 14px;
  height:1.8rem;
  line-height: 1.8rem;
}

</style>
